<template>
  <div>
    <div class="page-header-button">
      <el-button type="primary" @click="showAdd">
        <el-icon><CirclePlus /></el-icon>
        &nbsp;添加
      </el-button>
    </div>
    <el-row>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="type" label="平台" width="100">
          <template #default="scope">
            <icon-platform :name="getCodeByType(scope.row.type)" style="color: #0077aa" />
            &nbsp;
            {{getLabelByType(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="别名" :show-overflow-tooltip="true" />
        <el-table-column prop="access_id" label="账号ID" :show-overflow-tooltip="true" />
        <el-table-column prop="access_key" label="账号Key" :show-overflow-tooltip="true" />
        <el-table-column prop="access_secret" label="补充密钥" :show-overflow-tooltip="true" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
                link
                type="primary"
                size="small"
                @click.prevent="showModify(scope.row)"
            >
              <el-icon><EditPen /></el-icon>
              修改
            </el-button>
            <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page-block" >
        <el-pagination small layout="prev, pager, next" :page-size="page.size" :total="page.total" :current-change="getData" />
      </div>
    </el-row>

    <account-form ref="refAccountForm" @refresh="reload" />
  </div>
</template>

<script>
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue"
import StoreCloudAccount from "@/store/StoreCloudAccount"
import IconPlatform from "@/components/common/IconPlatform.vue"
import EnumPlatform from "@/config/EnumPlatform"
import AccountForm from "@/components/account/AccountForm.vue"

export default {
  name: 'AccountManage',
  components: {
    CirclePlus, EditPen, Delete, IconPlatform, AccountForm
  },
  data () {
    return {
      tableData: [],
      page: {
        size: 20,
        page: 1,
        total: 1
      }
    }
  },
  methods: {
    /**
     * 加载数据.
     * @param resetPage
     */
    getData(resetPage) {
      if (resetPage) {
        this.page.page = 1;
      }

      StoreCloudAccount.getPagedData(this.page.page, this.page.size, null, (data) => {
        this.tableData = data.data
        this.page.total = data.total
      })
    },
    /**
     * 重新加载.
     */
    reload() {
      console.log("AccountManage reload")
      this.getData(true)
    },
    /**
     * 根据类型获取平台编码.
     * @param type
     * @returns {*|string}
     */
    getCodeByType(type) {
      const platform = EnumPlatform.getByType(type)
      return platform ? platform.code : ''
    },
    /**
     * 根据类型获取平台名称.
     * @param type
     * @returns {*|string}
     */
    getLabelByType(type) {
      const platform = EnumPlatform.getByType(type)
      return platform ? platform.label : ''
    },
    /**
     * 显示新增窗口.
     */
    showAdd() {
      this.$refs.refAccountForm.show(false, {})
    },
    /**
     * 显示修改窗口.
     */
    showModify(row) {
      this.$refs.refAccountForm.show(true, Object.assign({}, row))
    },
    /**
     * 删除.
     */
    deleteRow(row) {
      this.$confirm('确定需要删除该账号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        StoreCloudAccount.delete({id: row.id})
        this.$message.success('删除成功')
        this.getData()
      })
    }
  },
  mounted() {
    console.log("AccountManage mounted")
    StoreCloudAccount.init(this);
    this.getData(true);
  }
}
</script>

<style scoped>

</style>